<template>
  <view
    class="tn-avatar-group"
  >
    <template
      v-for="(item, index) in data"
      :key="index"
    >
      <view
        class="tn-avatar-group__item"
        :style="avatarStyle(index)"
        @tap.stop="handleClick(index)"
      >
        <tn-avatar
          v-bind="item"
          :size="size"
          :shape="shape"
        >
          {{ item.text || '' }}
          <template v-slot:badge>
            {{ item?.badgeConfig?.text || '' }}
          </template>
        </tn-avatar>
      </view>
    </template>
  </view>
</template>

<script lang="ts" setup>
import { avatarGroupProps, avatarGroupEmits, AvatarGroupList, AvatarShape } from '../../../types/tn-avatar'
import { computed, CSSProperties } from 'vue'
import TnAvatar from './Avatar.vue'
import { TuniaoSize, TuniaoSizes } from '../../../types/tuniao-ui'


const props = defineProps(avatarGroupProps)
const emits = defineEmits(avatarGroupEmits)

// 头像列表信息
const data = computed<AvatarGroupList[]>(() => {
  if (!props?.data) {
    return []
  }
  return props.data as AvatarGroupList[]
})

// size尺寸和头像偏移位置信息
const avatarSizeGapMap: {
  [prop: string]: number
} = {
  normal: 65,
  sm: 52,
  lg: 96,
  xl: 128
}
// 头像样式
const avatarStyle = computed<(index: number) => CSSProperties>(() => {
  return (index: number) => {
    let style: CSSProperties = {}
    if (index !== 0) {
      style.transform = `translateX(-${avatarSizeGapMap['normal']*props.gap*index}rpx)`
      if (!!props?.size && TuniaoSizes.includes(props.size as TuniaoSize)) {
        style.transform = `translateX(-${avatarSizeGapMap[props.size]*props.gap*index}rpx)`
      }
    }
    
    return style
  }
})

// 形状类型转换
const shape = computed<AvatarShape>(() => {
  return props.shape as AvatarShape
})

// 处理点击事件
const handleClick = (index: number) => {
  // 获取用户设置的index
  let propsIndex = data.value[index]?.index
  emits('click', propsIndex || index)
}
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>
.tn-avatar-group {
  display: flex;
  flex-direction: row;

  &__item {
    position: relative;
  }
}
</style>
